<!--
* description: 多类型搜索选择（含弹窗）
* author: hm
* createdDate: 2021
-->

<template>
  <section class="multipSearch">
    <el-col :span="span">
      <lableName
        :cur-label-name="curLabelName"
        :is-show-label="isShowLabel"
        :is-require="isRequire"
      />
      <el-input
        v-model="valueByShowType"
        :placeholder="placeHolderByDisabled"
        :disabled="disabled"
        size="small"
        suffix-icon="el-icon-s-unfold"
        clearable
        :readonly="readOnlyByVisible"
        @blur="sendCode"
        @focus="getFocusCode"
        @clear="clearCode"
      />
      <validateFormate :cur-label-name="curLabelName" :validrule="validrule" />
    </el-col>
    <rulesSet
      :key="curPopupsKey"
      ref="rulesSet"
      :popups-visible.sync="curPopupsVisible"
      :code-field="codeField"
      :com-type="comType"
      :title="curLabelName"
      :popups-key="popupsKey"
      :code="modelCode"
      :text="modelText"
      :value-object="dataToObject"
      :is-mul="isMul"
      @changeCode="getComponentCode"
    />
  </section>
</template>
<script>
import { searchInputMixins } from "@/components/mixins/searchInputMixins";
import { valueObjectMixins } from "@/components/mixins/valueObjectMixins";
import rulesSet from "./rulesSet";
export default {
  name: "rulesSetInput",
  components: {
    rulesSet,
    lableName: () => import("@/components/lableName"), // 标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate"), // 校验提示样式组件
  },
  // 组件混入对象
  mixins: [searchInputMixins, valueObjectMixins],
  props: {
    customObj: {
      type: Object,
      default: () => ({
        showType: "text",
      }),
    },
  },
  data() {
    return {
      openId: 0,
      clickRowData: {},
      editPageClassName: "t",
      editEl: null,
      curPopupsVisible: false,
      placeholder: this.disabled
        ? ""
        : `选择${this.labelName.substring(0, this.labelName.length - 1)}`,
      curLabelName: this.labelName,
    };
  },
  computed: {
    placeHolderByDisabled() {
      return this.disabled
        ? ""
        : `选择${this.labelName.substring(0, this.labelName.length - 1)}`;
    },
    readOnlyByVisible() {
      return this.curPopupsVisible;
    },
    valueByShowType() {
      return this.customObj["showType"] === "text"
        ? this.modelText
        : this.modelCode;
    },
  },
  watch: {
    modelCode(val) {
      if (val) {
        this.$emit(
          "changeCode",
          val,
          this.modelText,
          this.codeField,
          this.comType,
          this.popupsKey,
          this.textField,
          this.otherField,
          this.clickRowData
        );
      } else {
        this.clickRowData = {};
      }
    },
    curPopupsVisible(val) {
      this.read = val;
    },
    clickRowData(val) {
      const parentComp = this.$utils.getHasFormFieldParentComponent(this);
      const otherFiledArr = this.otherField.split(",");
      for (const otherField of otherFiledArr) {
        if (
          Object.prototype.hasOwnProperty.call(parentComp.formField, otherField)
        ) {
          parentComp.formField[otherField] = val[otherField] || "";
        }
      }
    },
  },
  methods: {
    getFocusCode() {
      // 如果preType为空,则将备用preType的值赋给preType
      if (!this.dataToObject.formField.preType) {
        console.log(this.dataToObject.preTypeStandby)
        this.dataToObject.formField.preType =
          this.dataToObject.preTypeStandby;
      }


      if (
        this.dataToObject.beforeOpen &&
        typeof this.dataToObject.beforeOpen === "function"
      ) {
        this.dataToObject.beforeOpen(this);
      } else {
        this.curPopupsVisible = true;
        this.$nextTick(() => {
          // 加载dialog中的数据
          this.$refs["rulesSet"].queryTable(1);
        });
      }
    },
  },
};
</script>
<style lang="css" scoped>
>>> input.el-input__inner {
  cursor: pointer;
}
</style>
